<template>
  <div class="box">
    <h3>Child</h3>
    <div>父组件传过来的count: {{ count }}</div>
    <!-- <button @click="count++">自增</button> -->
    <button @click="increment(5)">修改父组件中count的值</button>
  </div>
</template>

<script lang="ts" setup>
// 加TS的写法
// 注意: 在TS类型中除了Function大写,其他小写
//       如果是数组,自己定义 type 类型
//       如果是对象,需要自己定义 interface 接口
defineProps<{
  count: number,
  // increment: Function // 书写Function,仅仅是定义了接收的 increment 是一个函数
  increment: (num: number) => void // 不光告诉TS increment是个函数,并且知道参数是什么类型,返回值是什么类型
}>()


// 没有加TS可以写三种接收方式
// 注意: 在没有加TS的时候,在接收参数写类型的时候,都是大写
// 1. 数组写法
// defineProps(['count'])
// 2.对象写法
// defineProps({
//   count: Number
// })
// 3. 配置对象写法
// defineProps({
//   count: {
//     type: Number,
//     required: true, // 必填
//     // default: 4 // default 和 required 互斥
//   }
// })
</script>
